<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1400px" append-to-body v-loading="loading">
        <div class="tool-box">
            <el-button type="primary" plain icon="el-icon-plus" :loading="save" :disabled="save" @click="submit">提交批量修改</el-button>
        </div>
        <!-- <hot-table ref="hotTable" :settings="hotSettings" licenseKey="non-commercial-and-evaluation" /> -->
        <div id="edit-check-spu-data-table" ref="hotTable"></div>
    </el-dialog>
</template>

<script>
import { queryOrderCheckSpuList, editOrderCheckSpu } from '@/api/order'

import { HotTable } from '@handsontable/vue'
import Handsontable from 'handsontable'
import 'handsontable/languages/zh-CN'
import { HyperFormula } from 'hyperformula'
export default {
    name: 'EditFormDialog',
    components: { HotTable },
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            save: false,
            hotSettings: {},
            tableData: [[]],
            hotInstance: {},
        }
    },
    computed: {
        title() {
            return `批量编辑`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },

    async created() {
        this.loading = true
        const res = await queryOrderCheckSpuList(this.params)
        this.tableData = res.data.list
        // this.tableData = this.tableData.concat([
        //     {
        //         total_price: 'SUM',
        //         refund: 'SUM',
        //         freight: 'SUM',
        //         material: 'SUM',
        //     },
        //     {
        //         total_price: `=SUM(E1:E${this.tableData.length})`,
        //         refund: `=SUM(F1:F${this.tableData.length})`,
        //         freight: `=SUM(G1:G${this.tableData.length})`,
        //         material: `=SUM(H1:H${this.tableData.length})`,
        //     },
        // ])
        this.$nextTick(() => {
            this.initTable()
            this.loading = false
        })
    },
    methods: {
        initTable() {
            const container = document.querySelector('#edit-check-spu-data-table')
            const height = this.tableData.length > 20 ? window.innerHeight * 0.76 : 'auto'
            this.hotInstance = new Handsontable(container, {
                data: this.tableData,
                minCols: 10,
                minRows: 10,
                licenseKey: 'non-commercial-and-evaluation',
                className: 'htCenter htMiddle',
                // selectionMode: 'single',
                manualRowResize: true,
                manualColumnResize: true,
                colHeaders: true,
                rowHeaders: true,
                language: 'zh-CN',
                mergeCells: true,
                copyPaste: true,
                colWidths: 200,
                height: height,
                width: '100%',
                autoWrapRow: true,
                autoWrapCol: true,
                rowHeights: 30,
                columnSorting: true,
                columns: [
                    {
                        title: 'ID',
                        type: 'text',
                        data: 'id',
                    },
                    {
                        title: '月份',
                        type: 'text',
                        data: 'date',
                    },
                    {
                        title: 'SPU',
                        type: 'text',
                        data: 'spu',
                    },
                    {
                        title: '单价（RMB）',
                        type: 'text',
                        data: 'material',
                    },
                ],
                
                contextMenu: true, // 右键
                formulas: {
                    // 公式
                    engine: HyperFormula,
                },
                filters: true, // 下拉筛选
                dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
                fixedRowsBottom: 2,
                
                afterFilter() {
                    const filtersPlugin = this.getPlugin('filters')
                    const filtersRowsMap = filtersPlugin.filtersRowsMap

                    filtersRowsMap.setValueAtIndex(filtersRowsMap.indexedValues.length - 2, false)
                    filtersRowsMap.setValueAtIndex(filtersRowsMap.indexedValues.length - 1, false)
                },
            })
        },

        submit() {
            this.$confirm('是否确认批量修改？', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.save = true
                    const checkList = this.hotInstance.getSourceData()
                    editOrderCheckSpu(checkList)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                })
                .catch(() => {})
        },
    },
}
</script>

<style>
.htDropdownMenu:not(.htGhostTable),
.htContextMenu:not(.htGhostTable) {
    z-index: 9000;
}
.tool-box {
    position: fixed;
    right: 0;
    top: 40%;
    background: transparent;
    padding: 12px;
    z-index: 9001;
}
</style>
